<template>
  <div class="login" @keyup.enter="onLogin">
    <el-form ref="form" :model="form" :rules="formRules">
      <img src="@/assets/logo_index.png" alt="">
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox name="type" v-model="form.isAgree">我已阅读并统一用户协议和隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" @click="onLogin" type="primary" :loading="loginLoading" >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 导入请求模块
// import request from '@/utils/request.js'
// 引入保存token方法
import { setToken } from '@/utils/stroage.js'
import { login } from '@/api/user'

export default {
  name: 'login',
  data () {
    return {
      form: {
        mobile: '13911111111',
        code: '246810',
        isAgree: true
      },
      loginLoading: false, // 控制登录加载，防止重复发送请求
      // 表单验证
      /* 配置Form 表单验证：
      1、必须给 el-form 组件绑定 model 为表单数据对象
      2、给需要验证的表单项 el-form-item 绑定 prop 属性
         注意：prop 属性需要指定表单对象中的数据名称
      3、通过 el-form 组件的 rules 属性配置验证规则
      */
      formRules: { // 表单验证规则配置
      // 要验证的数据名称：规则列表[]
        mobile: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空' },
          { pattern: /^\d{6}$/, message: '请输入正确的验证码', trigger: 'blur' }
        ],
        // 自定义校验规则 { validator: 校验函数, trigger: '' }
        isAgree: [
          {
            validator: (rule, value, callback) => {
              // if (value) {
              //   // 如果值为true 直接通过
              //   callback()
              // } else {
              //   callback(new Error('请阅读用户协议和隐私条款'))
              // }
              value ? callback() : callback(new Error('请阅读用户协议和隐私条款'))
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    onLogin () {
      // 获取表单数据（根据接口要求绑定数据）
      // 验证通过，用户提交
      // 先对整个表单进行校验
      this.$refs.form.validate(valid => {
        if (valid) {
          // 更改加载状态为 true 开始加载
          this.loginLoading = true
          // 表单校验通过，应该发送ajax请求
          console.log('校验通过')
          // request.post('/mp/v1_0/authorizations', this.form)
          // 用封装后的请求
          login(this.form.mobile, this.form.code)
            .then(res => {
              this.$message({
                message: '登录成功',
                type: 'success'
              })
              // 成功后结束加载
              this.loginLoading = false
              // 保存token到本地
              // localStorage.setItem('token', res.data.data.token)
              setToken(res.data.data.token)
              // 跳转到主页面
              this.$router.push('/')
              // console.log(res)
            })
            .catch(err => {
              console.log('登录失败', err)
              this.$message.error('登录失败，验证码或手机号错误')
              // 失败后也要结束加载
              this.loginLoading = false
            })
        } else {
          console.log('表单校验失败')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/login_bg.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-form{
    width: 400px;
    background-color: #fff;
    padding: 20px 40px;
  }
  img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .btn {
    width: 100%;
  }
  a{
    color: rgb(64, 158, 255);
  }
</style>
